import React from 'react';
import {Line} from '@ant-design/plots';
import {Datum} from "@antv/g2plot";

type ModelProps = {
  baseStyle: any,
  efficiencyCurve: API.EfficiencyCurveCharDTO[] | undefined,
}
const EfficiencyCurve: React.FC<ModelProps> = ({efficiencyCurve, baseStyle}) => {
  const data: {day: string | undefined, value: number | undefined, category: string}[] = [];
  efficiencyCurve?.forEach(item => {
    data.push({
      day: item.day + "",
      value: item.targetEfficiency && Number((item.targetEfficiency).toFixed(2)),
      category: '目标效率',
    })
    data.push({
      day: item.day + "",
      value: item.actualEfficiency && Number((item.actualEfficiency).toFixed(2)),
      category: '实际效率',
    })
  })
  const config: any = {
    data,
    point: {
      size: 3
    },
    xField: 'day',
    yField: 'value',
    label: {
      formatter: (value: any) => value.value && Number((value.value * 100).toFixed(2)) + '%'
    },
    seriesField: 'category',
    yAxis: {
      label: {
        formatter: (value: number) => value && Number((value * 100).toFixed(2)) + '%'
      },
      max: 1,
    },
    tooltip: {
      title: (value: number) => new Date().getMonth() + 1 + "月" + value + "日",
      formatter: (datum: Datum) => {
        return {name: datum.category , value: Number((datum.value * 100).toFixed(2)) + '%' };      },
    },
    color: ['#D62A0D','#1979C9'],
    height: 250,
  };

  return (
    <div key={3} style={{...baseStyle,margin: "5px 0"}}>
      <div style={{textAlign: "center", color: "orange", paddingTop: 5}}>{new Date().getFullYear() + "年" + (new Date().getMonth() + 1)}月 产线月度效率曲线</div>
      <Line {...config}/>
    </div>
  )
};

export default EfficiencyCurve;

